<template>
  <div id="app">
    <!--  第一步先获取到图片的地址，稍后改造  -->
    <img :class="imgClass" v-for="img in images" :src="img.imageUrl"/>
    <div :class="btnClass" @click="loadImg">再来一波</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      images:[],
      imgClass:'myImg',
      btnClass:'myBtn'
    }
  },
  // 页面元素挂载完成后的回调
  mounted() {
    this.loadImg();
  },
  methods:{
    loadImg:function () {
      // this表示vue对象，赋值给局部变量vm
      let vm = this;
      // 使用axios发送请求
      // url 请求路径  method 请求方式
      // then 请求成功的回调 res：请求成功的响应对象
      // catch 请求出现异常的回调 err: 请求失败的异常对象
      this.axios({
        url: 'https://www.mxnzp.com/api/image/girl/list/random?app_id=ypawwbi0iheosmql&app_secret=dGdHaHBkZllocDRCNjdnOU5IZmR4UT09',
        method: 'GET'
      }).then(function (res) {
        // vm.images 获取vue中的images变量
        vm.images.push(...res.data.data);
      }).catch(function (err) {
        console.log(err)
      });
    }
  }
}
</script>

<style>
  .myImg {
    width: 192px;
    height: 108px;
    border: gray 1px solid;
    margin: 4px 8px;
    border-radius: 10px;
  }

  .myBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(0,0,0,.2);
    color: white;
  }
</style>
